<%--
  Author: chengwei
  Date: 2016/7/15
  Time: 16:16
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理</title>
    <link rel="stylesheet" href="/resource/bootstrap/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/resource/js/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/resource/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
    <div class="col-md-2">
        <div class="list-group" id="columnList1">
        </div>
    </div>
    <div class="col-md-10">
        <button type="button" class="btn btn-default" onclick="showColumnModal();">新增</button>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>构架名称</th>
                <th>显示顺序</th>
                <th>是否公共</th>
                <th>是否Jsp</th>
                <th>url</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="content">
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

</div>
</body>
</html>

<!-- Modal -->

<script>

    $(function() {
        //加载栏目
        $.post("/user/column/showb", {}, function (d) {
            var html = "";
            $.each(d, function (i, item) {
                html += "<a id='"+item.columnId+"' class='list-group-item' href='javascript:void (0);' onclick=\"onClickColumn(" + i + ",'" + item.columnId + "');\">" + item.name + "</a>";
            });

            $("#columnList1").html(html);
        });
    });
    
    function onClickColumn(index,id) {

        //选中点击的栏目
        var $column = $("#columnList1 a");
        $column.removeClass("active");
        $column.eq(index).addClass("active");
        showFunction(id);
    }
    
    function showFunction() {
        var $function = $("#columnList1 .active").eq(0).attr("id");
        $.get("/user/function/show",{column_id:$function},function(d) {
            var html = "";
            $.each(d,function(i,item) {
                item.aPublic = item.aPublic?"是" : "否";
                item.jsp = item.jsp?"是" : "否";
                html += "<tr>";
                html += "<td>" + item.name + "</td>";
                html += "<td>" + item.showOrder + "</td>";
                html += "<td>" + item.aPublic + "</td>";
                html += "<td>" + item.jsp + "</td>";
                html += "<td>" + item.url + "</td>";
                html += "<td>" +
                        "<button type='button' class='btn btn-default btn-sm' onclick=\"showFunctionModal('" +item.functionId+ "');\">修改</button>" +
                        " <button type='button' class='btn btn-default btn-sm' onclick=\"delFunction('" +item.functionId+ "');\">删除</button>" +
                        "</td>'";
                html += "</tr>";
            });
            $("#content").html(html);
        });
    }
    
    function showFunctionModal(id) {
        $("#myModal").load("/user/function/form", {function_id: id}, function () {
//            $("#columnId").val(id);
//            $("#name").val(d.name);
//            $("#showOrder").val(d.showOrder);
            $("#myModal").modal("show");
        });
    }


    function delFunction(id) {
        $.post("/user/column/delete", {function_id: id}, function () {
            $("#column_" + id).remove();
        });
    }
    
    function doSaveFunction() {

        $.post("/user/function/save",$("#frm").serializeArray(), function (d) {
            $("#myModal").modal("hide");
            showFunction();
        });
    }


</script>

</script>